<template>
	<block v-if='left!=null'>
		<view class="uni-tooltip" :style='{top: top + "px", left: left + "px"}' v-if='visibleSync'>
			<view class='uni-tooltip-popup' @click="close">
				<view class='hint-title' v-if='title!="" && title!=null'>{{title}}</view>
				<block v-if='msgArr.length>0'>
					<view class='hint-msg' v-for="(msg, msgIndex) in msgArr" :key="msgIndex">{{msg}}</view>
				</block>
			</view>
		</view>
	</block>
	<block v-if='right!=null'>
		<view class="uni-tooltip" :style='{top: top + "px", right: right + "px"}' v-if='visibleSync'>
			<view class='uni-tooltip-popup' @click="close">
				<view class='hint-title' v-if='title!=""'>{{title}}</view>
				<block v-if='msgArr.length>0'>
					<view class='hint-msg' v-for="(msg, msgIndex) in msgArr" :key="msgIndex">{{msg}}</view>
				</block>
			</view>
		</view>
	</block>
</template>

<script>
	import gui from '@/lib/gui.js';
	export default {
		name: "uni-tooltip",
		data() {
			return {
				visibleSync: false,
				top: 0,
				left: null,
				right: null,
				title: '',
				watchTimer: null,
				msgArr: []
			}
		},
		props: {
		},
		mounted(){
			gui.init(this);
		},
		methods:{
			close() {
				this.visibleSync=false;
			},
			
			open(event, title, msgArr) {
				var that = this;
				if (that.watchTimer) {
					clearTimeout(that.watchTimer)
				}
				
				that.watchTimer = setTimeout(() => {
					that.visibleSync=true;
					that.title=title;
					that.msgArr=msgArr;
					if(event.detail.x > that.setting.windowWidth / 2){
						that.right=that.setting.windowWidth - event.detail.x;
						that.left=null;
					}else{
						that.left=event.detail.x;
						that.right=null;
					}
					that.top=event.detail.y;
				}, true ? 50 : 300)
			},
			
			openOnPosition(pos, title, msgArr){
				var that = this;
				if (that.watchTimer) {
					clearTimeout(that.watchTimer)
				}
				
				that.watchTimer = setTimeout(() => {
					that.visibleSync=true;
					that.title=title;
					that.msgArr=msgArr;
					if(pos.left > that.setting.windowWidth / 2){
						that.right=that.setting.windowWidth - pos.right;
						that.left=null;
					}else{
						that.left=pos.left;
						that.right=null;
					}
					that.top=pos.bottom + 2;
				}, true ? 50 : 300)
			},
			
			_change(param1, param2, status, event, msg) {
				this[param1] = status
				
			},
		}
	}
</script>

<style>
	.uni-tooltip {
		position: fixed;
		cursor: pointer;
	}
	
	.uni-tooltip-popup{
		background-color: rgba(0,0,0,0.5);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 5px 10px;
		color: #fff;
		border-radius: 5px;
	}
	
	.hint-title{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-size: 14px;
		padding: 5px 0px;
	}
	
	.hint-msg{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		font-size: 12px;
		padding: 5px 0px;
	}

	/* .uni-tooltip-popup {
		z-index: 1;
		display: none;
		position: absolute;
		left: 0;
		background-color: #333;
		border-radius: 8px;
		color: #fff;
		font-size: 12px;
		text-align: left;
		line-height: 16px;
		padding: 12px;
	}


	.uni-tooltip:hover .uni-tooltip-popup {
		display: block;
	} */
</style>
